<template>
	<page-meta :root-font-size="fontValue+'px'"></page-meta>
	<view class="content">
		<view>
			<view class="fontchange">文字大小</view>
		</view>
		<view style="width:100%;padding: 0 10px;">
			<slider
				:min="14"
				:max="26"
				:value="fontValue"
				@change="sliderChange"
				:step="4"
			/>
			<view class="change-fontsize-box">
				<text style="font-size: 14px;">
					小
				</text>
				<text style="font-size: 18px;">
					标准
				</text>
				<text style="font-size: 22px;">
					中
				</text>
				<text style="font-size: 26px;">
					大
				</text>
			</view>
		</view>
		<view style="padding: 20px 10px;width: 100%;">
			<uni-button type="primary" @click="submit">确定</uni-button>
		</view>
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			fontValue: this.$store.state.user.my_fontsize,
		};
	},
	onShow() {
		this.fontValue = this.$store.state.user.my_fontsize
	},
	methods: {
		sliderChange(e) {
			this.fontValue = e.detail.value;
		},
		submit() {
			this.$store.dispatch("changeMyFontsize", this.fontValue)
			uni.showToast({
				title: '设置成功',
				icon:'none',
				duration: 1500
			});
		},
	},
};
</script>
 
<style>
.fontchange {
	font-size: 1rem;
	margin: 20px 0;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
}
.change-fontsize-box{
	margin: 10px 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
</style>
